<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>认证中心</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/larea.css"/>
	</head>
	<style type="text/css">
		/*移动端1px下边线*/
		.border{ position: relative; }
		.border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color:  #efefef; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
		.boxhead{height: 0.8rem;background: #0e6eb8;color: #fff;font-size: 0.32rem;}
		.boxhead .state{font-size: 0.3rem;}
		.boxhead img{height: 0.34rem; width: auto;}
		.boxcont{background: #fff;font-size: 0.3rem;padding: 0.2rem 0;display: none;}
		#positive{height: 1.68rem;width: 1.68rem;border:solid 1px #E5E5E5;border-radius: 5px;margin-bottom: 0.05rem;text-align: center;}
		#positive img{height: 1.68rem;width: 1.68rem;border-radius: 5px;}
		#otherSide{height: 1.68rem;width: 1.68rem;border:solid 1px #E5E5E5;border-radius: 5px;margin-bottom: 0.05rem;text-align: center;}
		#otherSide img{height: 1.68rem;width: 1.68rem;border-radius: 5px;}
		#hold{height: 1.68rem;width: 1.68rem;border:solid 1px #E5E5E5;border-radius: 5px;margin-bottom: 0.05rem;text-align: center;}
		#hold img{height: 1.68rem;width: 1.68rem;border-radius: 5px;}
		.boxcont a{color: #0D6FB8;margin-left:0.3rem ;text-decoration: underline;}
		.iconbox{height: 2.8rem;}
		.icon{width: 1.75rem;font-size: 0.28rem;margin: 0 0.25rem;height: 2.8rem;}
		.icon img{height: 1.68rem;width: auto;}
		.from{width: 7.1rem;border: solid 1px #E5E5E5;margin: 0.1rem auto 0 0.2rem;}
		.table{height:1rem;}
		.table p{margin-left: 0.35rem;}
		.table img{width: 0.43rem;height: auto;margin-right: 0.3rem;}
		.table input{height: 0.6rem;padding-left: 0.15rem;line-height: 0.6rem;margin-left: 0.2rem;}
		.table .submit{height: 0.6rem;width: 5rem;background:#0e6eb8;color: #fff;border-radius: 5px;cursor: pointer;}
		.photo{height: 0.4rem;width: 2rem;color: #fff;background: #0E6EB8;border-radius: 3px;margin-top: 0.1rem;font-size: 0.28rem;cursor: pointer;}
		select{margin-top: 0.05rem;appearance:none;-moz-appearance:none; /* Firefox */-webkit-appearance:none; /* Safari 和 Chrome */;font-size: 0.3rem;margin-right: 0.1rem;height: 0.4rem;line-height: 0.4rem;background: #fff;}
	</style>
	<body>
		<!--实名认证-->
		<div class="authBox border">
			<div class="boxhead flex flex-align-center" data-boxhead = '1'>
				<p style="margin-left: 0.35rem;" class="flex-1">实名认证</p>
				<p class="state" id="realauth_state"></p>
				<img src="img/right.png" style="margin-right: 0.2rem;"/>
			</div>
			<div class="boxcont" style="display: none;">
				<div class="iconbox flex flex-align-center flex-pack-center">
					<div class="icon  flex flex-align-center flex-v" data-icon="sfzz">
						<div id="positive">
							<img src=""/>
						</div>
						<p>身份证人像面</p>
						<div class="photo flex flex-align-center flex-pack-center"><p>拍照</p></div>
					</div>
					<div class="icon  flex flex-align-center flex-v" data-icon="sfzf">
						<div id="otherSide">
							<img src=""/>
						</div>
						<p>身份证国徽面</p>
						<div class="photo flex flex-align-center flex-pack-center"><p>拍照</p></div>
					</div>
					<div class="icon  flex flex-align-center flex-v" data-icon="sfzsc">
						<div id="hold">
							<img src=""/>
						</div>
						<p>手持身份证照</p>
						<div class="photo flex flex-align-center flex-pack-center"><p>拍照</p></div>
					</div>
				</div>
				<p style="margin-left: 0.2rem;font-size: 0.28rem;margin-top: 0.1rem;">根据您的身份证照片识别出以下信息，请确认信息提交</p>
				<div class="from">
					<div class="table flex flex-align-center border">
						<p>姓名</p> <input type="text" id="Username" placeholder="请输入姓名"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>身份证号码</p> <input type="number" id="cardNo_number" placeholder="请输入身份证号码"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>身份证地址</p>
						<input type="text" id="dizhi" placeholder="请选择身份证地区" readOnly='readOnly'/>
						<input type="hidden" id="dizhikey"  value="" readonly=""/>
					</div>
					<div class="table flex flex-align-center border">
						<p>身份证详细地址</p> <input type="text" id="user_address" placeholder="请输入身份证详细地址"/>
					</div>
					<div class="table flex flex-align-center flex-pack-center border" >
							<div class="submit flex flex-align-center flex-pack-center" onclick="Auth.realNameAuth()"><p style="margin: 0;">提交</p></div>
					</div>
				</div>
			</div>
		</div>
		<!--店铺认证-->
		<div class="authBox border">
			<div class="boxhead flex flex-align-center" data-boxhead="3">
				<p style="margin-left: 0.35rem;" class="flex-1">店铺认证</p>
				<p class="state" id="shopauth_state"></p>
				<img src="img/right.png" style="margin-right: 0.2rem;"/>
			</div>
			<div class="boxcont" style="display: none;">
				<div class="from">
					<div class="table flex flex-align-center border">
						<p class="flex-1">认证类型</p>
						<select id="authType">
							<option value="0">个人</option>
							<option value="1">商户</option>
						</select>
						<img  style="height: 0.3rem;width: auto;margin-right: 0.3rem;" src="img/rightarr.png"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>商户名称</p> <input type="text" id="shopName" placeholder="请输入商户名称"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>经营地址</p>
						<input type="text" id="shopAuth" placeholder="请选择经营地址" readOnly='readOnly'/>
						<input type="hidden" id="shopAuthkey"  value="" readonly="readOnly"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>详细地址</p> <input type="text" id="address" placeholder="请输入详细地址"/>
					</div>
					<div class="table flex flex-align-center flex-pack-center border" >
						<div class="submit flex flex-align-center flex-pack-center" onclick="Auth.shopAuth()"><p style="margin: 0;">提交</p></div>
					</div>
				</div>
			</div>
		</div>
		<!--结算卡认证-->
		<div class="authBox border">
			<div class="boxhead flex flex-align-center">
				<p style="margin-left: 0.35rem;" class="flex-1">结算卡认证</p>
				<p class="state" id="bundCardauth_state"></p>
				<img src="img/right.png" style="margin-right: 0.2rem;"/>
			</div>
			<div class="boxcont">
			<a href="http://www.uniao.me/help/support-bank.html">支持的银行卡？</a>
			<div class="from">
				<div class="table flex flex-align-center border">
						<p>持卡人</p>
						<input type="text" id="accName" placeholder="请输入持卡人姓名" class="flex-1 Name" readOnly='readOnly'/>
						<img src="img/warning.png" alt="" data-winkey='0' onclick="main.openWin(this)"/>
					</div>
				<div class="table flex flex-align-center border">
						<p>卡号</p> <input type="number" style="margin-left: 0.5rem;" id="accNo" placeholder="请输入结算卡号"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>开户银行</p> <input type="text" id="bankName" placeholder="请输入开户银行" readOnly='readOnly'/>
					</div>
					<div class="table flex flex-align-center border">
						<p>开户城市</p>
						<input type="text" id="bankCity" placeholder="请选择开户城市" readOnly='readOnly'/>
						<input type="hidden" id="bankCitykey" readOnly='readOnly' value=""/>
					</div>
					<div class="table flex flex-align-center border">
						<p>开户支行</p> <input type="text" id="bankzName" placeholder="请输入开户支行" readOnly='readOnly' onclick="Auth.Authjump()"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>手机号</p> <input type="number" id="phoneNo" placeholder="请输入预留手机号(必填)"/>
					</div>
					<div class="table flex flex-align-center flex-pack-center border" >
						<div class="submit flex flex-align-center flex-pack-center" id='accSubmit' onclick="Auth.settleCardAuth()"><p style="margin: 0;">提交</p></div>
					</div>
				</div>
			</div>
		</div>
		<!--信用卡认证-->
		<div class="authBox border">
			<div class="boxhead flex flex-align-center">
				<p style="margin-left: 0.35rem;" class="flex-1">信用卡认证</p>
				<p class="state" id="quickCardauth_state"></p>
				<img src="img/right.png" style="margin-right: 0.2rem;"/>
			</div>
			<div class="boxcont" >
				<a href="http://www.uniao.me/help/support-bank.html">支持的银行卡？</a>
				<div class="from">
				<div class="table flex flex-align-center border">
						<p>持卡人</p>
						<input type="text" id="creditName" placeholder="请输入持卡人姓名"  class="flex-1 Name" readOnly='readOnly'/>
						<img src="img/warning.png" alt="" data-winkey='1' onclick="main.openWin(this)"/>
					</div>
				<div class="table flex flex-align-center border">
						<p>卡号</p> <input type="number" id="creditNo" placeholder="请输入信用卡号"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>安全码</p>
						<input type="number" id="lastNo" placeholder="信用卡背后面尾3尾数"  class="flex-1"/>
						<img src="img/warning.png" alt="" data-winkey='2' onclick="main.openWin(this)"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>有效期</p>
						<input type="number" id="effectiveNo" placeholder="有效期 05/20 就写0520"  class="flex-1"/>
						<img src="img/warning.png" alt="" data-winkey='3' onclick="main.openWin(this)"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>手机号</p> <input type="number" id="creditPhone" placeholder="请输入预留手机号(必填)"/>
					</div>
					<div class="table flex flex-align-center flex-pack-center border" >
						<div class="submit flex flex-align-center flex-pack-center" onclick="Auth.creditClick()"><p style="margin: 0;">提交</p></div>
					</div>
				</div>
			</div>
		</div>
		<!--商户认证-->
		<div class="authBox border">
			<div class="boxhead flex flex-align-center" data-boxhead='2'>
				<p style="margin-left: 0.35rem;" class="flex-1">商户认证</p>
				<p class="state" id="merchantauth_state"></p>
				<img src="img/right.png" style="margin-right: 0.2rem;"/>
			</div>
			<div class="boxcont">
				<div class="iconbox flex flex-align-center flex-pack-center">
					<div class="icon  flex flex-align-center flex-v" style="width: 3.5rem;height: 2.8rem;" data-icon="yyzz" id="yyzz">
						<img src="img/zwimg.png"/>
						<p>营业执照</p>
						<div class="photo flex flex-align-center flex-pack-center"><p>拍照</p></div>
					</div>
					<div class="icon  flex flex-align-center flex-v" style="width: 3.5rem;height: 2.8rem;" data-icon="mtz" id="mtz">
						<img src="img/zwimg.png"/>
						<p>门头照</p>
						<div class="photo flex flex-align-center flex-pack-center"><p>拍照</p></div>
					</div>
				</div>
				<div class="from" style="margin-top: 0.3rem;">
					<div class="table flex flex-align-center border">
						<p class="flex-1">商户类型</p>
						<select id="mchDealType">
							<option value="1">实体</option>
							<option value="2">虚拟</option>
						</select>
						<img  style="height: 0.3rem;width: auto;margin-right: 0.3rem;" src="img/rightarr.png"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>公司法人</p>
						<input type="text" id="legalPerson" placeholder="请输入公司法人"  class="flex-1"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>联系邮箱</p>
						<input type="text" id="email" placeholder="请输入联系邮箱"  class="flex-1"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>客服电话</p>
						<input type="text" id="customerPhone" placeholder="请输入客服电话"  class="flex-1"/>
					</div>
					<div class="table flex flex-align-center border">
						<p>行业类别</p> 
						<input type="text" id="industry" placeholder="请选择行业类别" readOnly='readOnly'/>
						<input type="hidden" id="industrykey" readOnly='readOnly' value=""/>
					</div>
					<div class="table flex flex-align-center border">
						<p>营业执照</p>
						<input type="text" id="licenseNo" placeholder="请输入营业执照号码"  class="flex-1"/>
						<img src="img/warning.png" alt="" data-winkey='4' onclick="main.openWin(this)"/>
					</div>
					<div class="table flex flex-align-center flex-pack-center border" >
						<div class="submit flex flex-align-center flex-pack-center" onclick="Auth.merchantAuth()"><p style="margin: 0;">提交</p></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/rem.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/selector.js"></script>
	<script type="text/javascript" src="js/template.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/wxconf.js"></script>
	<script type="text/javascript" src="js/larea.js"></script>
	<script type="text/javascript">
		Public.login(function(res){ //根据userId登录该页面
			switch(res.data.authMap.realauth){
				case -1: $('#realauth_state').text('未认证');break;
				case 0:  $('#realauth_state').text('待审核');break;
				case 1:   $('#realauth_state').text('审核成功');break;
				case 2:  $('#realauth_state').text('审核失败');break;
			}
			switch(res.data.authMap.shopauth){
				case -1: $('#shopauth_state').text('未认证');break;
				case 0:  $('#shopauth_state').text('待审核');break;
				case 1:  $('#shopauth_state').text('审核成功');break;
				case 2:  $('#shopauth_state').text('审核失败');break;
			}
			switch(res.data.authMap.bundCardauth){
				case -1: $('#bundCardauth_state').text('未认证');break;
				case 0:  $('#bundCardauth_state').text('待审核');break;
				case 1:  $('#bundCardauth_state').text('审核成功');break;
				case 2:  $('#bundCardauth_state').text('审核失败');break;
			}
			switch(res.data.authMap.quickCardauth){
				case -1: $('#quickCardauth_state').text('未认证');break;
				case 0:  $('#quickCardauth_state').text('待审核');break;
				case 1:  $('#quickCardauth_state').text('审核成功');break;
				case 2:  $('#quickCardauth_state').text('审核失败');break;
			}
			switch(res.data.authMap.merchantauth){
				case -1: $('#merchantauth_state').text('未认证');break;
				case 0:  $('#merchantauth_state').text('待审核');break;
				case 1:  $('#merchantauth_state').text('审核成功');break;
				case 2:  $('#merchantauth_state').text('审核失败');break;
			}
			$('.Name').val(localStorage.userName); //持卡人
			$(".state:contains('未认证')").eq(0).parent().siblings('.boxcont').show();
			$(".state:contains('未认证')").eq(0).siblings('img').attr('src','img/down.png');
		})
		Public.industryMap(function(root){ //商户认证行业分类
			 var industry = new LArea();
			 industry.init({
			        'trigger': '#industry', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
			        'valueTo': '#industrykey', //选择完毕后id属性输出到该位置
			        'keys': {
			            id: 'code',
			            name: 'name'
			        }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
			        'type': 1, //数据源类型
			        'data': root//数据源
			    });
		});
		Public.areaMap(function(root){
			 //身份证地址三级联动
			 var dizhi = new LArea();
			 dizhi.init({
			        'trigger': '#dizhi', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
			        'valueTo': '#dizhikey', //选择完毕后id属性输出到该位置
			        'keys': {
			            id: 'code',
			            name: 'name'
			        }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
			        'type': 1, //数据源类型
			        'data': root//数据源
			    });
			//店铺地址三级联动
			var shopAuth = new LArea();
			shopAuth.init({
			        'trigger': '#shopAuth', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
			        'valueTo': '#shopAuthkey', //选择完毕后id属性输出到该位置
			        'keys': {
			            id: 'code',
			            name: 'name'
			        }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
			        'type': 1, //数据源类型
			        'data': root//数据源
			    });
			//结算卡认证三级联动
			var settleCardAuth = new LArea();
			settleCardAuth.init({
			        'trigger': '#bankCity', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
			        'valueTo': '#bankCitykey', //选择完毕后id属性输出到该位置
			        'keys': {
			            id: 'code',
			            name: 'name'
			        }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
			        'type': 1, //数据源类型
			        'data': root//数据源
			    });
		});
		var main = {
			openWin: function(self){ //提示图标打开窗口
				var winkey = $(self).data('winkey');
				switch(winkey){
					case 0: main.layerOpen('此结算卡为通道收款银行卡，为了资金安全，只能绑定当前持卡人的结算卡');break; //结算卡认证提示
					case 1: main.layerOpen('此信用卡为通道付款银行卡，为了资金安全，只能绑定当前持卡人的信用卡');break; //信用卡认证提示
					case 2: main.layerOpen('安全码为信用卡背后尾三位</br>如5759043则输入043');break; //信用卡 安全码
					case 3: main.layerOpen('请输入信用卡正面有效期</br>如05/22,则输入0522');break; //信用卡 有效期
					case 4: main.layerOpen('请输入营业执照编码');break; //营业执照号
				}
			},
		  layerOpen: function(text){
		  		layer.open({
				    content: text
				    ,btn: '我知道了'
			  });
		  }
		}
		$(function(){
			$('#accNo').val(sessionStorage.accNo); //取出缓存银行卡号
			$('#bankName').val(localStorage.shortName); //取出缓存银行名
			$('#bankCity').val(sessionStorage.bankCity); //取出缓存开户城市
			$('#bankCitykey').val(sessionStorage.bankCitykey); //取出缓存开户城市code
			$('#bankzName').val(localStorage.branchName); //结算卡支行名
		});
		$('.boxhead').click(function(){ //窗口开启或者关闭响应事件
			var type = $(this).data('boxhead');
			if($(this).children('img').attr('src')=='img/right.png'){ //打开面板
				var webpath = 'http://www.uniao.me';
				switch(type){
					case 1:
						Public.getLatelyAuth({
							userId:localStorage.userId,
							type:1
						},function(res){
							if(res.data != null){
									$('#positive img').attr('src',webpath+res.data.qualification.card1);
									$('#otherSide img').attr('src',webpath+res.data.qualification.card2);
									$('#hold img').attr('src',webpath+res.data.qualification.card3);
									$('#Username').val(res.data.fullName);
									$('#cardNo_number').val(res.data.cardNo);
									$('#user_address').val(res.data.address);
									$('#dizhi').val(res.data.areaNames);
							}
						});
						break;
					case 3:
						Public.getLatelyAuth({
							userId:localStorage.userId,
							type:3
						},function(res){
							if(res.data != null){
								$('#authType').find("option[value='"+ res.data.authType +"']").attr("selected",true);
								$('#shopName').val(res.data.shopName);
								$('#shopAuth').val(res.data.areaNames);
								$('#address').val(res.data.address);
							}
						});
						break;
					case 2:
						Public.getLatelyAuth({
							userId:localStorage.userId,
							type:2
						},function(res){
							console.log(res);
							if(res.data != null){
								if(res.data.qualification.facadePhoto != ''){
									$('#yyzz img').attr('src',webpath+res.data.qualification.licensePhoto);
								}
								if(res.data.qualification.facadePhoto != ''){
									$('#mtz img').attr('src',webpath+res.data.qualification.facadePhoto);
								}
								$('#mchDealType').find("option[value='"+ res.data.authType +"']").attr("selected",true);
								$('#industry').val(res.data.industrName);
								$('#licenseNo').val(res.data.licenseNo);
								$('#email').val(res.data.email);
								$('#legalPerson').val(res.data.legalPerson);
								$('#customerPhone').val(res.data.customerPhone);
							}
						});
						break;
				}
				$(this).siblings('.boxcont').show();
				$(this).parent().siblings().find('.boxcont').hide();
				$(this).parent().siblings().find('.boxhead').children('img').attr('src','img/right.png');
				$(this).children('img').attr('src','img/down.png');
			}else{
				$(this).siblings('.boxcont').hide();
				$(this).children('img').attr('src','img/right.png');
			}	
		});
		$('#accNo').on('change',function(){ //通过银行卡号获取银行名称
			var accNo = $(this).val();
			sessionStorage.accNo = accNo;//缓存银行卡号
			if(accNo.length<16 || accNo == ''){
				layer.open({
						content: '卡号至少16位',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});	
			}else{
				Public.getBankInfo({
					bankno: accNo,
				    isCredit: false //新增参数
				},function(res){
					localStorage.accbankId = res.data.id;
					localStorage.shortName = res.data.shortName;
					$('#bankName').val(res.data.shortName);
				});
			}
		});
		$('#authType').on('change',function(){
			var authType = $('#authType option:selected').val();
			if(authType == 1){
				layer.open({
				    content: '认证类型为商户,需要营业执照</br>可进行商户认证'
				    ,btn: '我知道了'
			  });
			}
		});
	</script>
</html>
